<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <!-- 1.app.message修改数据，vue内部是如何监听message数据改变的
    Object.defineProperty->监听对象属性的改变
    2.当数据发生改变，vue是如何知道要通知那些元素界面发生了改变
    发布订阅者模式
    -->

    <div id="app">
      {{message}}
    </div>
    <script type="text/javascript">
      const obj = {
        message : "hello wrold",
      }

      Object.keys(obj).forEach(key=>{
        let value = obj[key];
          Object.defineProperty(obj,key,{
            set(newVal){
              console.log(`监听到${key}的变化`)
              // 告诉谁？谁用告诉谁？谁在用？
              // 根据解析HTMLdiamante，获取按些人有用到该属性
              // 张三、李四、王五
              value = newVal
            },
            get(){
              console.log(`获取${key}的值`)
              // 张三 ： get
              return value
            }
          })
      })
        // 发布者订阅者模式
       // 发布者
      class Dep{
        constructor() {
            this.subscribes = []
        }
        addSub(wather){
          this.subscribes.push(wather)
        }

        notify(){
          this.subscribes.forEach(item=>{
            item.update()
          })
        }
      }
      // 订阅者
      class Watcher{
        constructor(name) {
          this.name = name

        }
        update(){
          console.log(this.name + '发生update')
        }
      }
      const dep = new Dep()
      const w1 = new Watcher('张三')
      dep.addSub(w1)
      dep.notify()
    </script>

    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
      const app = new Vue({
        el:"#app",
        data:{
          message : "hello wrold"
        }
      })
    </script>
	</body>
</html>
